<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import gdglService from '@/api/gdgl'
import { GdgzListQueryResult } from '@/api/gdgl-dto'

/*
 * 打开弹框
 */
//
const dialogVisible = ref(false)
const openDialog = (gdbh: string) => {
  // 获取归档跟踪信息
  getLclb(gdbh)
  dialogVisible.value = true
}

/*
 * 获取流程列表
 */
// 流转记录
const lzjlList = ref<GdgzListQueryResult[]>([])
const getLclb = (gdbh: string) => {
  const params = {
    gdbh,
  }
  gdglService
    .queryGdgzList(params)
    .then((res) => {
      if (res.data) {
        lzjlList.value = res.data
      }
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

defineExpose({
  openDialog,
})
</script>
<template>
  <el-dialog v-model="dialogVisible" title="归档跟踪" width="40%" :close-on-click-modal="false">
    <div class="dialog-box">
      <div class="timeline-box" v-if="lzjlList.length">
        <el-timeline>
          <el-timeline-item
            v-for="item in lzjlList"
            :key="item.jlbh"
            :timestamp="item.czsj"
            placement="top"
          >
            <el-card>
              <span class="card-item-xm">{{ item.czrxm }}</span>
              <span class="card-item-nr">{{ item.cznr }}</span>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <el-empty v-else description="暂无数据"></el-empty>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.dialog-box {
  width: 100%;
  height: 600px;
  overflow: auto;
  .timeline-box {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  .timeline-conten {
    border: 1px solid #dfdfdf;
    padding: 10px;
  }
  .card-item-xm {
    font-size: 14px;
    letter-spacing: 0px;
    color: #4b5881;
    font-weight: bold;
    margin-right: 30px;
  }
  .card-item-nr {
    font-size: 14px;
    color: #05b75d;
  }
  .el-empty {
    width: 100%;
    height: 100%;
  }
}
</style>
